{% extends 'Layout.html' %}
{% block css %}
    <style>
        .from-lang,
        .to-lang {
            position: relative;
        }
    </style>
{% endblock %}
{% block content %}

    <div class="container">
        <div class="row">
            <div class="col-xs-1">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                            style="width: 130px;margin-top: 0">
                        <span class="from-lang">中文（简体）</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu from-menu">
                        <li><a href="#">中文（简体）</a></li>
                        <li><a href="#">英语</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-2">
                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" style="margin-left: 95px; padding-top: 5px"
                     width="30"
                     height="30" viewBox="0 0 1024 1024">
                    <path fill="currentColor"
                          d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8M872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8"/>
                </svg>
            </div>
            <div class="col-xs-2">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                            style="width: 130px">
                        <span class="to-lang">英语</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu to-menu">
                        <li><a href="#">中文（简体）</a></li>
                        <li><a href="#">英语</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-1">
                <button id="trans_now" type="button" class="btn btn-default">立即翻译</button>
            </div>
            <div class="col-xs-6">
                <button id="draw_now" type="button" class="btn btn-default">情感分析</button>
            </div>
        </div>
        <div class="row" style="margin-top: 10px">
            <div class="col-xs-6">
                <footer>&nbsp;</footer>
                <textarea class="form-control input_text" rows="3" placeholder="请输入需要翻译的语句"
                          style="height: 200px;resize: none;font-size: 20px"></textarea>
            </div>
            <div class="col-xs-6">
                <footer style="text-align: right">
                    本网站非商业网站，翻译结果由
                    <a href="https://fanyi.baidu.com/" target="_blank">百度翻译</a>
                    提供
                </footer>
                <div class="form-control trans_result"
                     style="width: 100%; height: 200px;background-color: #f5f5f5;font-size: 20px">
                    <div class="">
                        翻译结果
                    </div>
                </div>
            </div>


        </div>
        <div class="panel panel-default" style="margin-top: 30px;">
            <div class="panel-heading">
                <h4 style="margin: 0">情感分析结果</h4>
            </div>
            <div class="panel-body">
                <div id="m1" style="width: 100%;height:320px;"></div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>

        $(document).ready(function () {
            BindExcLanguage()
        });

        $(function () {
            BindFromLanguage()
            BindToLanguage()
            BindTransLanguage()
            {# 折线图 #}
            initLine()
            BindDrawLine()
        })

        function BindFromLanguage() {
            $('.from-menu li a').click(function () {
                $('.from-lang').text($(this).text());
            })
        }

        function BindToLanguage() {
            $('.to-menu li a').click(function () {
                $('.to-lang').text($(this).text());
            })
        }

        function BindExcLanguage() {
            $('.svg-icon').hover(
                function () {
                    // 鼠标悬停时将鼠标指针的形状设置为手指形状
                    $(this).css('cursor', 'pointer');
                },
                function () {
                    // 鼠标移开时将鼠标指针的形状设置为默认形状
                    $(this).css('cursor', 'default');
                }
            );

            $('.svg-icon').click(function () {
                let fromLang = $('.from-lang').text();
                let toLang = $('.to-lang').text();

                // 执行双向移动动画效果
                $('.from-lang').animate({left: '250px'}, 500);
                $('.to-lang').animate({left: '-250px'}, 500);
                $('.from-lang').animate({left: '0px'}, 10);
                $('.to-lang').animate({left: '0px'}, 10);

                // 交换文本内容
                $('.from-lang').text(toLang);
                $('.to-lang').text(fromLang);
            });
        }

        function BindTransLanguage() {
            $('#trans_now').click(function () {
                $.ajax({
                    url: '/analysis/gettrans',
                    type: 'get',
                    data: {
                        from_lang: $('.from-lang').text(),
                        to_lang: $('.to-lang').text(),
                        word: $('.input_text').val(),
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            $('.trans_result').text(res.trans_result)
                        }
                    }
                })
            })
        }

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('m1'));
        let option = undefined;
        function initLine() {
            option = {
                title: {
                    text: '情感倾向变化趋势折线图',
                    textAlign: "auto",
                    left: "center",
                    subtext: getTime()
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    {#data: ['英文情感分值变化', '中文情感分值变化'],#}
                    bottom: 0
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['疫情前', '疫情间', '疫情后']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '中文情感分值变化',
                        type: 'line',
                        stack: 'Total',
                        data: [-5, 0, 2]
                    },
                    {
                        name: '英文情感分值变化',
                        type: 'line',
                        stack: 'Total',
                        data: [1, 2, 3]
                    },
                ]
            }
        }

        function BindDrawLine() {
            $('#draw_now').click(function () {
                    $.ajax({
                        url: '/analysis/line',
                        type: 'GET',
                        data: {
                            from_word: $('.input_text').val(),
                            to_word: $('.trans_result').text(),
                        },
                        datatype: 'JSON',
                        success: function (res) {
                            if (res.status) {
                                option.legend.data = res.data
                                option.title.subtext = getTime()
                                option.series = res.series
                                // 使用刚指定的配置项和数据显示图表。
                                console.log(option)
                                myChart.setOption(option);
                            }
                        }
                    })
                }
            )
        }
        function getTime() {
            // 获取当前时间
            var currentTime = new Date();

            // 创建一个字符串，包含年、月、日、小时、分钟和秒
            var timeString = currentTime.getFullYear() + '-' +
                (currentTime.getMonth() + 1) + '-' +
                currentTime.getDate() + ' ' +
                currentTime.getHours() + ':' +
                currentTime.getMinutes() + ':' +
                currentTime.getSeconds();
            return timeString
        }
    </script>
{% endblock %}